<template>
  <u-navbar bg-color="unset" autoBack left-icon-color="#fff"></u-navbar>
  <!-- <swiper class="videoSwiper" vertical :duration="1000" @change="handleChange" @transition="handlerTansition"> -->
  <!-- <swiper-item v-for="item in 2" :key="item"> -->
  <video :src="prefixURL(videoInfo.video)" class="video-img"></video>
  <view class="action-right">
    <button class="share-btn  u-flex-xy-center" @click="_videoLikes">
      <u-image :src="videoInfo.is_collect?'/static/images/01_31dfgas.png':'/static/images/ddsdfgas.png'" :fade="false"
        width="52rpx" height="52rpx"></u-image>
      <u-text margin="15rpx 0 0  0" :text="videoInfo.likes" align="center" color="#fff" size="13"></u-text>
    </button>
    <button open-type="share" class="share-btn u-m-t-44  u-flex-xy-center">
      <u-image src="/static/images/01_44dfgas.png" :fade="false" width="62rpx" height="52rpx"></u-image>
      <u-text margin="15rpx 0 0  0" text="分享" align="center" color="#fff" size="13"></u-text>
      <u-text text="领红包" align="center" color="#fff" size="13"></u-text>
    </button>
  </view>
  <view class="video-desc">
    <view class="video-text">
      {{videoInfo.description}}
    </view>
    <houseItem :item="videoInfo.house" customStyle="background:#fff"></houseItem>
  </view>
  <!-- </swiper-item> -->
  <!-- </swiper> -->
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import houseItem from '@/components/house-item/house-item.vue'
  import { videoDetail, videoLikes } from '../../../config/api';
  import { getCache, prefixURL, setCache } from '../../../util/util';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ""
    },
    user_id: {
      type: [String, Number],
      default: ""
    }
  })
  const videoInfo = ref({ house: {} })
  onShareTimeline(() => {
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/houseLive/houseVideo?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  onShareAppMessage(() => {
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/houseLive/houseVideo?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
	if(props.user_id){
		setCache('invite',props.user_id)
	}
  onMounted(() => {
    _videoDetail()
  })
  // 切换动作
  const handlerTansition = (e) => {
    console.log(e, '---')
  }
  // 切换轮播图
  const handleChange = (e) => {
    console.log(e)
  }
  // 收藏视频
  const _videoLikes = () => {
    videoLikes({ id: videoInfo.value.id }).then(res => {
      videoInfo.value.is_collect = !videoInfo.value.is_collect
      if (videoInfo.value.is_collect) videoInfo.value.likes++
      else videoInfo.value.likes--
    })
  }
  // 视频详情
  const _videoDetail = () => {
    videoDetail({ id: props.id, user_id: props.user_id }).then(res => {
      console.log(res)
      videoInfo.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .videoSwiper {
    height: 100vh;
  }

  .video-img {
    width: 100%;
    height: 100vh;
  }

  .action-right {
    position: fixed;
    right: 34rpx;
    bottom: 20%;


    .share-btn {
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      text-align: center;
      flex-direction: column;
    }

    .share-btn::after {
      border: 0;
    }

    ::v-deep .u-text {
      line-height: normal;
    }
  }

  .video-desc {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 20rpx;
    right: 180rpx;

    .video-text {
      background: rgba(0, 0, 0, .26);
      border-radius: 24rpx;
      color: #fff;
      font-weight: 500;
      font-size: 26rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
    }

  }
</style>